<template>
  <!-- 核心企业贷款申请 -->
  <div id="box">
    <span>核心企业贷款申请</span>

    <div id="box2">
      <div class="box">
        <el-dropdown>
          <el-button type="primary">
            企业名称<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>企业名称</el-dropdown-item>
              <el-dropdown-item>社会信用代码</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 搜索框 -->
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="请输入要查询的核心企业名称"
          :prefix-icon="Search"
        />
        <!-- 下拉菜单 -->
        <el-select v-model="value" class="m-2" placeholder="全部" size="large">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 按钮 -->
        <el-button type="primary" class="but">查询</el-button>
        <el-button type="primary">重置</el-button>
      </div>
      <!-- 表格 -->
      <div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="序号"></el-table-column>
          <el-table-column prop="name" label="企业名称" />
          <el-table-column prop="name" label="社会信用代码" />
          <el-table-column prop="name" label="注册资本" />
          <el-table-column prop="name" label="业务员" />
          <el-table-column prop="name" label="流程状态" />
          <el-table-column prop="name" label="任务开始时间" />
          <el-table-column prop="name" label="操作" class="caozuo">
            <span class="span">
              <el-tooltip content="查看" placement="left">
                <el-icon><View @click="look()" /></el-icon>
              </el-tooltip>

              <el-tooltip content="申请进件" placement="right">
                <el-icon
                  ><Promotion @click="centerDialogVisible = true"
                /></el-icon>
              </el-tooltip>
            </span>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 15, 20, 25, 30]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total,page-count, sizes, prev, pager, next, jumper"
          :total="5"
          :page-count="20"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div>
      <!-- 弹框 -->
      <el-dialog
        v-model="centerDialogVisible"
        title="进件"
        width="25%"
        center
        align-center
      >
        <div style="text-align: center">
          <span> 是否确定要提交进件申请 </span>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
    
    <script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
const centerDialogVisible = ref(false);
var input2 = ref();
// var tableData = ref([]);
var router = useRouter();
var tableData = [
  {
    date: "1",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const options = [
  {
    value: "待审批",
    label: "待审批",
  },
  {
    value: "已审批",
    label: "已审批",
  },
];
const value = ref("");
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const pageSize4 = ref(5);
const currentPage4 = ref(4);
var handleSizeChange = () => {};
var handleCurrentChange = () => {};
/* 查看 */
var look = () => {
  router.push("/home/preloan/Look");
};
/* 进件 */
var submit = () => {};
</script>
    
<style scoped>
.el-select {
  width: 150px;
  margin-left: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.span {
  width: 70%;
  display: flex;
  justify-content: space-around;
  color: #4eabfe;
}
.el-icon {
  cursor: pointer;
}
#box {
  position: relative;
}
#box > span {
  display: block;
  width: 185px;
  height: 38px;
  background: #4eabfe;
  color: white;
  text-align: center;
  line-height: 38px;
  font-weight: 700;
  border-radius: 20px;
}
.box {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.el-input {
  margin-left: 20px;
  width: 300px;
}

.el-button {
  background: white;
  color: #b6b8be;
}
.el-button:hover {
  color: #4eabfe;
}
.but {
  background: #4eabfe;
  color: white;
  margin-left: 50px;
}

.dropdown {
  margin-left: 40px;
}
#box2 {
  background: #fafafa;
  height: 550px;
  padding: 20px;
}

.fenye {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 25%;
}
</style>